<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单管理</title>
    <link rel="stylesheet" href="../../css/wxq.css">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../font/css/font-awesome.min.css">
    <style>

    </style>
</head>
<body>

<!--头部公共样式-->
<header class="header">
    <div class = "logo float_left"><a href="../index/index.html">后台管理系统</a></div>
    <div class = "header_right">
        <nav>
            <ul>
                <li>
                    <a title="更多"><i class = "fa fa-navicon"></i></a>
                    <ul class="dropdown_menu">
                        <li id = "logout">&nbsp;<i class = "fa fa-sign-out"></i>&nbsp;退出</li>
                    </ul>
                </li>
                <li>
                    <a href="../message/messages.html" title = "消息"><i class = "fa fa-envelope"></i></a>
                    <span class="message_count"></span>
                </li>
            </ul>
        </nav>
        <div class = "message_warp_info"></div>
    </div>
</header>

<div class="container">

    <!--左边导航区-->
    <div class="slide" id ="slide">

        <!--左边管理员信息区域-->
        <div class = "admin_info">
            <a href="#" class = "admin_header_img">
                <img src="../../images/test_header.png" alt="">
                <div class = "upload_header_img">更换</div>
            </a>
            <div class = "admin_detail">
                <span class = "admin_type">超级管理员</span>
                <span class = "admin_name">王小强</span>
            </div>
        </div>

        <!--左边导航按钮区域-->
        <ul class = "menu" >
            <li>
                <a href="../index/index.html" class="super_menu">
                    <i class="fa fa-home"></i>&nbsp;&nbsp;首页
                </a>
            </li>
            <li>
                <a class="super_menu">
                    <i class="fa fa-gears"></i>&nbsp;&nbsp;系统配置<i class="fa fa-angle-right"></i>
                </a>
                <ul class = "menu_child_list" >
                    <li>
                        <a href="../conf/bannerSetting.html">
                            <i class="fa fa-image"></i>&nbsp;&nbsp;banner管理
                        </a>
                    </li>
                </ul>
            </li>

            <li>
                <a class="super_menu">
                    <i class="fa fa-users"></i>&nbsp;&nbsp;用户管理<i class="fa fa-angle-right"></i>
                </a>
                <ul class = "menu_child_list isSuper" >
                    <li>
                        <a href="../user/userList.html">
                            <i class="fa fa-user"></i>&nbsp;&nbsp;用户列表
                        </a>
                    </li>
                    <li>
                        <a href="../member/memberManagement.html">
                            <i class="fa fa-user-plus"></i>&nbsp;&nbsp;会员管理
                        </a>
                    </li>
                    <li>
                        <a href="../member/integralSetting.html">
                            <i class="fa fa-vcard"></i>&nbsp;&nbsp;积分设置
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a class="super_menu active">
                    <i class="fa fa-cart-plus"></i>&nbsp;&nbsp;商城管理<i class="fa fa-angle-right"></i>
                </a>
                <ul class = "menu_child_list isSuper" style="display: block">
                    <li>
                        <a href="../category/goodsCategory.html">
                            <i class="fa fa-bar-chart"></i>&nbsp;&nbsp;商品分类
                        </a>
                    </li>
                    <li>
                        <a href="../freight/freightTemplate.html">
                            <i class="fa fa-cart-arrow-down"></i>&nbsp;&nbsp;运费模板
                        </a>
                    </li>
                    <li>
                        <a href="../goods/goodsList.html">
                            <i class="fa fa-list"></i>&nbsp;&nbsp;商品列表
                        </a>
                    </li>
                    <li>
                        <a href="orderList.html">
                            <i class="fa fa-first-order"></i>&nbsp;&nbsp;订单管理
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="../message/messages.html" class="super_menu">
                    <i class="fa fa-comment"></i>&nbsp;&nbsp;消息管理
                </a>
            </li>
            <li>
                <a href="../index/dataStatistics.html" class="super_menu">
                    <i class="fa fa-signal"></i>&nbsp;&nbsp;数据统计
                </a>
            </li>
            <li>
                <a href="../admin/authoritySetting.html" class="super_menu">
                    <i class="fa fa-unlock"></i>&nbsp;&nbsp;权限管理
                </a>
            </li>
        </ul>
    </div>

    <div class="main_content">

        <div class="warp">
            <div class = "position">
                <span>当前位置：</span>
                <span>
                    <a>商城管理/</a>
                    <a href="../category/goodsCategory.html">订单列表</a>
                </span>
            </div>
        </div>

        <div class="warp" id = "obj_list">
            <div class="form_item">
                <div class="input_div_inline">
                    <select class="form_inline" id = "order_status">
                        <option value="" >选择订单状态</option>
                        <option value="NotPay" >未付款</option>
                        <option value="WaitGoods" >待发货</option>
                        <option value="ReceiveGoods" >已发货</option>
                        <option value="Cancelled" >已取消</option>
                        <option value="Complete" >已完成</option>
                    </select>
                </div>

                <div class = "input_div_inline">
                    <input type="date" id="startTime" placeholder="开始时间" class = "form_inline">
                </div>
                <div class = "input_div_inline">
                    <input type="date" id="endTime" placeholder="结束时间" class = "form_inline">
                </div>

                <button class="btn btn_success" id="query" @click="findOrdersByAttr">查询</button>
            </div>
            <table class="table table_border_bottom">
                <thead>
                <tr>
                    <th>订单编号</th>
                    <th>收货地址</th>
                    <th>商品总价</th>
                    <th>订单状态</th>
                    <th>收货人姓名</th>
                    <th>收货人电话</th>
                    <th>下单时间</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in resources.list">
                    <td v-text="item.order_id"></td>
                    <td v-text="item.province+item.city+item.district+item.address"></td>
                    <td v-text="'￥'+item.order_price"></td>

                    <td v-if="item.order_status === 'NotPay'" v-text="'待付款'"></td>
                    <td v-if="item.order_status === 'WaitGoods'" v-text="'待发货'"></td>
                    <td v-if="item.order_status === 'ReceiveGoods'" v-text="'待收货'"></td>
                    <td v-if="item.order_status === 'Cancelled'" v-text="'已取消'"></td>
                    <td v-if="item.order_status === 'Complete'" v-text="'已完成'"></td>
                    <td v-text="item.name"></td>
                    <td v-text="item.phone"></td>
                    <td v-text="item.add_time"></td>
                    <td v-text="item.postscript"></td>
                    <td>
                        <a class = "cursor_p" :href="'./orderDetail.html?id='+item.order_id" title = "详情" v-text = "'查看'"></a>
                        <a class = "cursor_p" :order_id = "item.order_id" @click="sendGoods"  v-if ="item.order_status === 'WaitGoods'" v-text = "'发货'"></a>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class = "pagination">
                <a v-if = "resources.total == undefined">共-条数据</a>
                <a v-if = "resources.total !== undefined" v-text="'共'+resources.total+'条数据'"></a>
                <input type="number" min="1" style="width: 64px" placeholder="跳转到" id="page_val"/>
                <a @click="first_page" class = "first_page">首页</a>
                <a @click="pre_page" class = "pre"><i class = "fa fa-angle-left"></i></a>
                <a>
                    <span class = "current_page" v-text="resources.currentPage"></span>
                    <span>/</span>
                    <span class = "total_page" v-text="resources.totalPage"></span>
                </a>
                <a @click="next_page" class = "next"><i class = "fa fa-angle-right"></i></a>
                <a @click="last_page" class = "last_page">尾页</a>
            </div>
        </div>
    </div>
</div>
<script src = "../../js/jquery-3.2.1.min.js"></script>
<script src="../../my_js/sockjs.min.js"></script>
<script src="../../my_js/stomp.min.js"></script>
<script src = "../../my_js/common.js"></script>
<script src = "../../js/wxq.js"></script>
<script src = "../../js/vue.min.js"></script>
<script type="text/javascript">
    let app = new Vue({
        el:"#obj_list",
        data: {
            resources:[],
            order_status:"",
            startTime:"",
            endTime:""
        },
        mounted:function () {
            this.first_page();
            document.querySelector("#page_val").onkeydown = (event)=>{
                let e = event || window.event || arguments.callee.caller.arguments[0];
                if(e && e.keyCode===13){ // enter 键
                    let inpVal = document.querySelector("#page_val").value;
                    this.getObjList(inpVal,pageSize,this.order_status,this.startTime,this.endTime)
                }
            };
        },
        methods: {
            first_page: function () {
                this.getObjList(1,pageSize,this.order_status,this.startTime,this.endTime)
            },
            last_page:function () {
                if(this.resources.currentPage < this.resources.totalPage){
                    this.getObjList(this.resources.totalPage,pageSize,this.order_status,this.startTime,this.endTime)
                }
            },
            pre_page:function () {
                if(this.resources.currentPage > 1){
                    this.getObjList(this.resources.currentPage-1,pageSize,this.order_status,this.startTime,this.endTime)
                }
            },
            next_page:function () {
                if(this.resources.currentPage < this.resources.totalPage){
                    this.getObjList(this.resources.currentPage+1,pageSize,this.order_status,this.startTime,this.endTime)
                }
            },
            getObjList:function (currentPage,pageSize,order_status,startTime,endTime) {
                $.get(rootPath+"/order",{currentPage:currentPage,pageSize:pageSize,
                    order_status:order_status,startTime:startTime,endTime:endTime}, (res)=> {
                    if(res.meta.code === 200){
                        this.resources = res.data;
                    }else {
                        this.resources = [];
                        alert("请求失败--"+res.meta.message)
                    }
                })
            },
            sendGoods:function (e) {
                let con = confirm("您确定要发货吗？");
                if(con){
                    let order_id = e.target.getAttribute("order_id");
                    $.get(rootPath+"/order/deliver",{order_id:order_id}, (res)=> {
                        if(res.meta.code === 200){
                            this.first_page();
                        }else {
                            alert("请求失败--"+res.meta.message)
                        }
                    })
                }
            },
            findOrdersByAttr:function () {
                this.order_status = $("#order_status").val();
                let startTime = $("#startTime").val();
                let endTime = $("#endTime").val();
                this.startTime = startTime ? startTime+" 00:00:00": startTime;
                this.endTime = endTime ? endTime+" 00:00:00":endTime;
                if (this.startTime === "" && this.endTime !==""){
                    alert("请选择起始时间");
                    return
                }
                if(this.startTime !== "" && this.endTime===""){
                    alert("请选择截止时间");
                    return
                }
                if(this.startTime && this.endTime){
                    let startTimeStamp = new Date(this.startTime).getTime();
                    let endTimeStamp = new Date(this.endTime).getTime();
                    if(startTimeStamp > endTimeStamp){
                        alert("起始时间不能大于截止时间");
                        return
                    }
                }
                this.getObjList(1,pageSize,this.order_status,this.startTime,this.endTime)
            }
        }
    })
</script>

</body>
</html>